<template>
	<view :class="currentTheme">
		<a-nabbar name="新增剧本" />
		<view class="u-padding-32">
			<item-box :padding="0">
				<view class="u-padding-left-40 u-padding-right-40">
					<label-box label="剧本名" labelWidth="130" labelSize="32" paddingTb="20">
						<select-item v-model="form.product" :list="larpList" @getIds="getlarpIds" v-if="larpList.length"></select-item>
						<view v-else>请先上传剧本</view>
					</label-box>
					<label-box label="售价" labelWidth="130" labelSize="32" paddingTb="20">
						<u-input
							type="digit"
							v-model="form.salePrice"
							:clearable="false"
							border
							:borderColor="currentThemeObj.inputBorderColor"
							placeholder="请输入售价"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`"
						></u-input>
					</label-box>
					<label-box label="体验价" labelWidth="130" labelSize="32" paddingTb="20">
						<u-input
							type="digit"
							disabled
							v-model="form.experiencePrice"
							:clearable="false"
							border
							:borderColor="currentThemeObj.inputBorderColor"
							placeholder="0.01"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`"
						></u-input>
					</label-box>
					<label-box label="库存" labelWidth="130" labelSize="32"  paddingTb="20">
						<u-input
							type="digit"
							v-model="form.stock"
							:clearable="false"
							border
							:borderColor="currentThemeObj.inputBorderColor"
							placeholder="请输入库存"
							:placeholder-style="`color:${currentThemeObj.placeholderColor}`"
						></u-input>
					</label-box>
				</view>
			</item-box>
			<view class="u-margin-top-20" v-if="option.type !== 'larp'">
				<item-box :padding="0">
					<view class="u-padding-left-40 u-padding-right-40">
						<label-box label="开本资料" labelWidth="130" labelSize="32" paddingTb="20">
							<view class="group-box u-flex">
								<view v-for="(item, index) in radioList" :key="index" class="u-margin-left-60">
									<v-radio :name="item.name"  v-model="radio" @change="radioChange" >
										<view class=" u-font-26 text-order-time" >{{item.text}}</view>
									</v-radio>
								</view>
							</view>
						</label-box>
					</view>
					<view class="u-border-top" v-show="showUrl">
						<view class="u-padding-left-40 u-padding-right-40">
							<label-box label="联系电话" labelWidth="130" labelSize="32" paddingTb="20">
										<u-input v-model="form.folioData" :clearable="false" border type="number" maxlength="11" 
										:borderColor="currentThemeObj.inputBorderColor" placeholder="请输入电话号码"
										:placeholder-style="`color:${currentThemeObj.placeholderColor}`"></u-input>
							</label-box>
						</view>
					</view>
				</item-box>
			</view>

			<fixed-team btnText="确定" @btnClick="save" :loading="loading"></fixed-team>
		</view>
	</view>
</template>

<script>
import { getList, add, getDetail } from '@/api/crud.js';
import vRadio from '@/components/itemRadio/itemRadio.vue';
export default {
	components: {
		vRadio
	},
	data() {
		return {
			form: {
				experiencePrice: '0.01',
				salePrice: '',
				productId: '',
				stock: '',
				folioData: ''
			},
			radio: 1,
			apiModule: 'shopApi',
			larpList: [],
			option: {
				type: 'goods'
			},
			loading: false,
			radioList: [{
					name: 1,
					text: '有'
				},
				{
					name: 0,
					text: '无'
				}
			],
			showUrl: true,
			apiType:'experienceProduct'
		};
	},
	onLoad(option) {
		this.option = option;
		this.getLarp();
	},
	computed: {
		uid() {
			return this.$store.getters.loginForm.uid;
		}
	},
	methods: {
		//获取剧本列表
		getLarp() {
			getList(
				{
					creatorId: this.uid
				},
				'product',
				this.apiModule,
				'list'
			).then(res => {
				this.larpList = res.map(val => ({
					value: val.id,
					label: val.name,
					people: val.people,
					issueModeName: val.issueModeName
				}));
			});
		},
		getlarpIds(id) {
			this.form.productId = id;
		},
		save() {
			const { experiencePrice, salePrice, productId, stock, folioData } = this.form;
			if (!productId) {
				this.$u.toast('请选择剧本');
				return false;
			}
			if (!Number(salePrice)) {
				this.$u.toast('请填写商品售价');
				return false;
			}
			if (!Number(stock)) {
				this.$u.toast('请填写商品库存');
				return false;
			}
			if(this.showUrl&&!folioData){
				this.$u.toast('请填写联系电话');
				return false;
			}

			const form = {
				...this.form,
				uid: this.uid
			};
			this.loading = true;
			add(form, this.apiType, this.apiModule)
				.then(res => {
					this.routeBack('新增成功');
					this.loading = false;
				})
				.catch(() => {
					this.loading = false;
				});
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			this.showUrl =  e !== 0;
		},
	}
};
</script>

<style lang="scss" scoped>
.hasTips {
	line-height: 74rpx;
}

.label-setting {
	width: 100rpx;
	line-height: 70rpx;
}

.no-padding {
	padding: 14rpx 0 14rpx 0 !important;
}

.group-box {
	line-height: 68rpx;
}
</style>
